<template>
  <div>
    <div class="wallet-info">
      <div class="single">
        <div class="text">
          <span>支付宝帐号：</span>
          <span v-if="!info.has_alipay">暂未绑定</span>
        </div>
        <div class="text" v-if="info.has_alipay">
          <span class="link" @click="$router.push({name: 'WalletReset'})">{{info.alipay_account}}</span>
        </div>
        <div class="button" v-if="!info.has_alipay">
          <mt-button class="blue" @click.native="$router.push({name: 'WalletBind'})">去绑定</mt-button>
        </div>
      </div>
      <div class="line"></div>
      <div class="double">
        <div class="text">
          <p>可提现帐户(元）:</p>
          <p class="big-text-blue"><span>¥</span>{{info.balance_amount}}</p>
        </div>
        <div class="button">
          <mt-button class="blue" @click.native="routerWalletDetail(1)">查看明细</mt-button>
          <mt-button class="red mt-12" @click.native="$router.push({name: 'WithdrawCash'})">提现</mt-button>
        </div>
      </div>
      <div class="line"></div>
      <div class="double">
        <div class="text">
          <p>冻结帐户(元)：</p>
          <p class="big-text-blue"><span>¥</span>{{info.frozen_amount}}</p>
        </div>
        <div class="button">
          <mt-button class="blue" @click.native="routerWalletDetail(2)">查看明细</mt-button>
        </div>
      </div>
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Wallet',
    data () {
      return {
        info: {}
      }
    },
    methods: {
      getInfo () {
        this.$post('/vue/my/wallet', '').then(data => {
          this.info = data
        })
      },
      routerWalletDetail (type) {
        this.$router.push({name: 'WalletDetail', params: {type: type}})
      }
    },
    mounted () {
      this.getInfo()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);

  .wallet-info {
    min-height: 100vh;
    background-color: #FFF;
    .single {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      .text {
        flex: 0 0 auto;
        color: @c-124;
        padding: 4px 0;
        span {
          font-size: 13px;
          line-height: 24px;
        }
        .link {
          color: @c-blue;
          text-decoration: underline;
        }
      }
    }
    .double {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      .text {
        width: 76%;
        flex: 0 0 auto;
        color: @c-124;
        padding: 4px 0;
        p {
          text-align: left;
          font-size: 13px;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .big-text-blue {
          margin-top: 16px;
          font-size: 24px;
          line-height: 32px;
          color: @c-blue;
          span {
            font-size: 13px;
          }
        }
      }
    }
    .button {
      width: 23%;
      flex: 0 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      justify-content: center;
      .mint-button {
        height: 32px;
        margin: 0;
        padding: 0;
        width: 100%;
        line-height: 0;
        text-align: center;
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 20px;
        &.mt-12 {
          margin-top: 12px;
        }
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #000;
        }
        &.blue {
          border: 2px solid @c-blue;
          .mint-button-text {
            color: @c-blue;
          }
        }
        &.red {
          border: 2px solid @c-red;
          .mint-button-text {
            color: @c-red;
          }
        }
      }
    }
    .line {
      height: 8px;
      background-color: rgb(240, 244, 247);
    }
  }
</style>